<template>
    <div>
        <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" :width="width">
            <template v-if="statusFormColumn.length > 0">
                <el-form ref="form" :model="form" label-width="20">
                    <el-form-item v-for="(item, index) in statusFormColumn" :key="index" :label="item.label">
                        <el-select v-if="item.type == 'Select'" v-model="form.status" :placeholder="item.placeholder"
                            clearable :style="{ width: item.width }">
                            <el-option v-for="(optionItem, optionIndex) in item.optionLabel" :key="optionIndex"
                                :label="optionItem.label" :value="optionItem.value"></el-option>
                        </el-select>
                        <el-input v-if="item.type == 'textarea'" :type="item.type" v-model="form.opinion"
                            :placeholder="item.placeholder" clearable></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
                </span>
            </template>
            <template v-else>
                <div class="content-box">
                    <span v-html="content"></span>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'DialogComponent',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false,
        },
        form: {
            type: Object,
            default: () => { }
        },
        statusFormColumn: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: '表单弹框'
        },
        width: {
            type: String,
            default: '30%'
        },
        content: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            loading: false,
        }
    },
    methods: {
        submit() {
            this.loading = true;
            setTimeout(() => {
                this.$emit('submitStatus', this.form)
                this.loading = false;
            }, 200);

        },
        handleClose() {
            console.log('关闭了');
            this.$emit('handleClose')
        }
    }
}
</script>

<style scoped>
.content-box {
    overflow-y: auto;
    height: 510px;
}
</style>